<template>
  <div class="container">
    <!--前//摄像头部分-->
    <div class="videoPlay">
      <video
        id="Qvideo"
        class="video-js"
        style="margin-top: 30px; margin-left: -450px; width: 500px; height: 400px"
        controls
        autoplay
        autobuffer
        muted
        preload="auto"
      ></video>
    </div>

    <!--后//摄像头部分-->
    <!--    <div class="videoPlay">-->
    <!--      <video-->
    <!--        id="Hvideo"-->
    <!--        class="video-js"-->
    <!--        style="margin-top: -450px; margin-left: 200px; width: 500px; height: 500px"-->
    <!--        controls-->
    <!--        autoplay-->
    <!--        autobuffer-->
    <!--        muted-->
    <!--        preload="auto"-->
    <!--      ></video>-->
    <!--    </div>-->

    <!--前摄像头部分-->
    <div>
<!--      <el-button @click="QipSet">前吊舱Ip地址</el-button>-->
<!--      <el-button @click="QsetColor">前伪彩设置</el-button>-->
      <el-button @click="QgetTemp">前获取温度</el-button>
    </div>
    <div>
      <el-button @click="QzoomFocus">前电子放大</el-button>
      <el-button @click="QzoomLess">前电子缩小</el-button>
      <el-button @click="QzoomStop">前电子停止</el-button>
    </div>
    <div>
      <el-button @click="QptzUp">前向上</el-button>
      <el-button @click="QptzDown">前向下</el-button>
      <el-button @click="QptzLeft">前向左</el-button>
      <el-button @click="QptzRight">前向右</el-button>

      <el-button @click="QLeftUp">前左上</el-button>
      <el-button @click="QLeftDown">前左下</el-button>
      <el-button @click="QRightUp">前右上</el-button>
      <el-button @click="QRightDown">前右下</el-button>

      <el-button @click="QptzStop">前云台停止</el-button>
    </div>
    <div>
      <el-button @click="QstartVideo">前手动开始录视频</el-button>
      <el-button @click="QendVideo">前手动停止录视频</el-button>
      <el-button @click="Qpicture">前拍照</el-button>
      <el-button @click="QsmbVideo">前同步视频文件</el-button>
      <el-button @click="QsmbPicture">前同步照片文件</el-button>
    </div>

    <!--后摄像头部分-->
    <div>
<!--      <el-button @click="HipSet">后吊舱Ip地址</el-button>-->
<!--      <el-button @click="HsetColor">后伪彩设置</el-button>-->
      <el-button @click="HgetTemp">后获取温度</el-button>
    </div>
    <div>
      <el-button @click="HzoomFocus">后电子放大</el-button>
      <el-button @click="HzoomLess">后电子缩小</el-button>
      <el-button @click="HzoomStop">后电子停止</el-button>
    </div>
    <div>
      <el-button @click="HptzUp">后向上</el-button>
      <el-button @click="HptzDown">后向下</el-button>
      <el-button @click="HptzLeft">后向左</el-button>
      <el-button @click="HptzRight">后向右</el-button>

      <el-button @click="HLeftUp">后左上</el-button>
      <el-button @click="HLeftDown">后左下</el-button>
      <el-button @click="HRightUp">后右上</el-button>
      <el-button @click="HRightDown">后右下</el-button>

      <el-button @click="HptzStop">后云台停止</el-button>
    </div>
    <div>
      <el-button @click="HstartVideo">后手动开始录视频</el-button>
      <el-button @click="HendVideo">后手动停止录视频</el-button>
      <el-button @click="Hpicture">后拍照</el-button>
      <el-button @click="HsmbVideo">后同步视频文件</el-button>
      <el-button @click="HsmbPicture">后同步照片文件</el-button>
    </div>

  </div>
</template>

<script>
  import {QgetTemp,QzoomFocus,QzoomLess,QzoomStop,
    QptzUp,QptzDown,QptzLeft,QptzRight,QLeftUp,QLeftDown,QRightUp,QRightDown,QptzStop,
    QstartVideo, QendVideo, Qpicture,QsmbVideo,QsmbPicture,
    HgetTemp,HzoomFocus,HzoomLess,HzoomStop,
    HptzUp,HptzDown,HptzLeft,HptzRight,HLeftUp,HLeftDown,HRightUp,HRightDown,HptzStop,
    HstartVideo, HendVideo, Hpicture,HsmbVideo,HsmbPicture} from "@/api/robot/camera/cameraDC/video";
  export default {
    name: "index1",
    data() {
      return {
        webRtcServer: null,//前摄像头服务
        // webRtcServer1: null,
      };
    },

    mounted() {
      // 初始化webrec服务
      // this.webRtcServer = new WebRtcStreamer("video", this.httpServer);
      //127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
      this.webRtcServer = new WebRtcStreamer('Qvideo', location.protocol + '//127.0.0.1:8000')
      // this.webRtcServer1 = new WebRtcStreamer('video1', location.protocol + '//127.0.0.1:8000')

      this.webRtcServer.connect('rtsp://192.168.2.92:554/stream=0')
      // this.webRtcServer1.connect('rtsp://192.168.2.92:554/stream=0')
    },

    beforeDestroy() {
      this.webRtcServer.disconnect()
      this.webRtcServer = null
    },

    methods: {
      //前-设置伪彩模式
      // QsetColor(){
      //   const q_video_ip="192.168.2.92";
      //   QsetColor(q_video_ip).then(response => {
      //     if(typeof(response)!=null){
      //       this.$modal.msg(response.msg);
      //     }
      //   });
      // },
      //前-获取温度
      QgetTemp(){
        const q_video_ip="192.168.2.92";
        QgetTemp(q_video_ip).then(response => {
          if(typeof(response)!=null){
            this.$modal.msg(response.msg);
          }
        });
      },
      //前-电子放大
      QzoomFocus(){
        const q_video_ip="192.168.2.92";
        QzoomFocus(q_video_ip).then(response => {
          // console.log("电子放大"+response)
        });
      },
      //前-电子缩小
      QzoomLess(){
        const q_video_ip="192.168.2.92";
        QzoomLess(q_video_ip).then(response => {
          // console.log("电子缩小"+response)
        });
      },
      //前-电子停止
      QzoomStop(){
        const q_video_ip="192.168.2.92";
        QzoomStop(q_video_ip).then(response => {
          // console.log("电子停止"+response)
        });
      },
      //前-向上
      QptzUp(){
        const q_video_ip="192.168.2.92";
        QptzUp(q_video_ip).then(response => {
          // console.log("向上"+response)
        });
      },
      //前-向下
      QptzDown(){
        const q_video_ip="192.168.2.92";
        QptzDown(q_video_ip).then(response => {
          // console.log("向下"+response)
        });
      },
      //前-向左
      QptzLeft(){
        const q_video_ip="192.168.2.92";
        QptzLeft(q_video_ip).then(response => {
          // console.log("向左"+response)
        });
      },
      //前-向右
      QptzRight(){
        const q_video_ip="192.168.2.92";
        QptzRight(q_video_ip).then(response => {
          // console.log("向右"+response)
        });
      },


      //前-左上
      QLeftUp(){
        const q_video_ip="192.168.2.92";
        QLeftUp(q_video_ip).then(response => {
          // console.log("向右"+response)
        });
      },
      //前-左下
      QLeftDown(){
        const q_video_ip="192.168.2.92";
        QLeftDown(q_video_ip).then(response => {
          // console.log("向右"+response)
        });
      },
      //前-右上
      QRightUp(){
        const q_video_ip="192.168.2.92";
        QRightUp(q_video_ip).then(response => {
          // console.log("向右"+response)
        });
      },
      //前-右下
      QRightDown(){
        const q_video_ip="192.168.2.92";
        QRightDown(q_video_ip).then(response => {
          // console.log("向右"+response)
        });
      },


      //前-云台停止
      QptzStop(){
        const q_video_ip="192.168.2.92";
        QptzStop(q_video_ip).then(response => {
          // console.log("云台停止"+response)
        });
      },
      //前-手动开始录视频
      QstartVideo(){
        const q_video_ip="192.168.2.92";
        QstartVideo(q_video_ip).then(response => {
          if(typeof(response)!=null){
            this.$modal.msg(response.msg);
          }
        });
      },
      //前-手动停止录视频
      QendVideo(){
        const q_video_ip="192.168.2.92";
        QendVideo(q_video_ip).then(response => {
          if(typeof(response)!=null){
            this.$modal.msg(response.msg);
          }
        });
      },
      //前-拍照
      Qpicture(){
        const q_video_ip="192.168.2.92";
        Qpicture(q_video_ip).then(response => {
          if(typeof(response)!=null){
            this.$modal.msg(response.msg);
          }
        });
      },
      //前-同步视频文件
      QsmbVideo(){
        const q_video_ip="192.168.2.92";
        QsmbVideo(q_video_ip).then(response => {
          console.log("同步视频"+response)
        });
      },
      //前-同步照片文件
      QsmbPicture(){
        const q_video_ip="192.168.2.92";
        QsmbPicture(q_video_ip).then(response => {
          console.log("同步照片"+response)
        });
      },



      //吊舱后摄像头
      //后-设置伪彩模式
      // HsetColor(){
      //   const h_video_ip="192.168.2.92";
      //   HsetColor(h_video_ip).then(response => {
      //     if(typeof(response)!=null){
      //       this.$modal.msg(response.msg);
      //     }
      //   });
      // },
      //后-获取温度
      HgetTemp(){
        const h_video_ip="192.168.2.92";
        HgetTemp(h_video_ip).then(response => {
          if(typeof(response)!=null){
            this.$modal.msg(response.msg);
          }
        });
      },
      //后-电子放大
      HzoomFocus(){
        const h_video_ip="192.168.2.92";
        HzoomFocus(h_video_ip).then(response => {
          // console.log("电子放大"+response)
        });
      },
      //后-电子缩小
      HzoomLess(){
        const h_video_ip="192.168.2.92";
        HzoomLess(h_video_ip).then(response => {
          // console.log("电子缩小"+response)
        });
      },
      //后-电子停止
      HzoomStop(){
        const h_video_ip="192.168.2.92";
        HzoomStop(h_video_ip).then(response => {
          // console.log("电子停止"+response)
        });
      },
      //后-向上
      HptzUp(){
        const h_video_ip="192.168.2.92";
        HptzUp(h_video_ip).then(response => {
          // console.log("向上"+response)
        });
      },
      //后-向下
      HptzDown(){
        const h_video_ip="192.168.2.92";
        HptzDown(h_video_ip).then(response => {
          // console.log("向下"+response)
        });
      },
      //后-向左
      HptzLeft(){
        const h_video_ip="192.168.2.92";
        HptzLeft(h_video_ip).then(response => {
          // console.log("向左"+response)
        });
      },
      //后-向右
      HptzRight(){
        const h_video_ip="192.168.2.92";
        HptzRight(h_video_ip).then(response => {
          // console.log("向右"+response)
        });
      },

      //后-左上
      HLeftUp(){
        const q_video_ip="192.168.2.92";
        HLeftUp(q_video_ip).then(response => {
          // console.log("向右"+response)
        });
      },
      //后-左下
      HLeftDown(){
        const q_video_ip="192.168.2.92";
        HLeftDown(q_video_ip).then(response => {
          // console.log("向右"+response)
        });
      },
      //后-右上
      HRightUp(){
        const q_video_ip="192.168.2.92";
        HRightUp(q_video_ip).then(response => {
          // console.log("向右"+response)
        });
      },
      //后-右下
      HRightDown(){
        const q_video_ip="192.168.2.92";
        HRightDown(q_video_ip).then(response => {
          // console.log("向右"+response)
        });
      },


      //后-云台停止
      HptzStop(){
        const h_video_ip="192.168.2.92";
        HptzStop(h_video_ip).then(response => {
          // console.log("云台停止"+response)
        });
      },
      //后-手动开始录视频
      HstartVideo(){
        const h_video_ip="192.168.2.92";
        HstartVideo(h_video_ip).then(response => {
          if(typeof(response)!=null){
            this.$modal.msg(response.msg);
          }
        });
      },
      //后-手动停止录视频
      HendVideo(){
        const h_video_ip="192.168.2.92";
        HendVideo(h_video_ip).then(response => {
          if(typeof(response)!=null){
            this.$modal.msg(response.msg);
          }
        });
      },
      //后-拍照
      Hpicture(){
        const h_video_ip="192.168.2.92";
        Hpicture(h_video_ip).then(response => {
          if(typeof(response)!=null){
            this.$modal.msg(response.msg);
          }
        });
      },
      //后-同步视频文件
      HsmbVideo(){
        const h_video_ip="192.168.2.92";
        HsmbVideo(h_video_ip).then(response => {
          console.log("同步视频"+response)
        });
      },
      //后-同步照片文件
      HsmbPicture(){
        const h_video_ip="192.168.2.92";
        HsmbPicture(h_video_ip).then(response => {
          console.log("同步照片"+response)
        });
      },


    },
  };
</script>

<style>
  /*页面整块大背景色*/
  .main-container {
    background-color: rgb(1 5 43);
  }
  .videoPlay {
    width: 500px;
    height: 500px;
    margin: 15px auto;
  }
  .video-js {
    background-color: rgb(1 5 43);
    object-fit: fill;
  }
</style>
